import React, { useState } from 'react';
import {
  Modal,
  Form,
  Row,
  Col,
  Input,
  Button,
  Select,
  Table,
  message,
} from 'antd';
import request from '@/http';

interface UserEditObject {
  isModalVisible: boolean;
  key?: number;
}

const UserEdit = (props: { editObject: UserEditObject; onClose: any }) => {
  const { editObject, onClose } = props;

  const courseId = editObject.key;

  const [pagination, setPagination] = useState({
    current: 1,
    total: 5,
    pageSize: 3,
    showSizeChanger: true,
    pageSizeOptions: ['3', '5', '10', '20'],
    showQuickJumper: true,
  });

  const [isModalVisible, setIsModalVisible] = React.useState(false);

  const [formObject] = Form.useForm();
  const [loading, setLoading] = useState(true);

  const [dataSource, setDataSource] = useState();

  const loadDataSource = async (
    userParams: any,
    pageValue: any,
    pageSizeValue: any,
  ) => {
    try {
      const data: any = await request.get(
        '/api/teacher/course/getCourseStudentInfo',
        {
          params: {
            courseId,
          },
        },
      );
      // console.log(data);
      const newPageObject = {
        ...pagination,
        current: pageValue,
        pageSize: pageSizeValue,
        total: data.records,
      };
      if (data.message == '成功!') {
        const dataSource = data.data.records.map((user: any) => ({
          key: user.userNo, //课程Id
          className: user.className,
          classTeacher: user.classTeacher,
          collegesName: user.collegesName,
          email: user.email,
          gradeName: user.gradeName,
          idNo: user.idNo,
          majorName: user.majorName,
          mobileNo: user.mobileNo,
          position: user.position,
          sex: user.sex,
          studentName: user.studentName,
          teamName: user.teamName,
          userNo: user.userNo,
        }));
        setPagination(newPageObject);
        setLoading(false);
        setDataSource(dataSource);
      }
    } catch (e) {
      message.error('数据出错');
    }
  };

  //页面初始化
  React.useEffect(() => {
    loadDataSource(null, 1, pagination.pageSize).finally();
    setIsModalVisible(editObject.isModalVisible);
    selectDataSource();
  }, [editObject]);

  //跳转指定页面
  const pageOnChange = async (page: any) => {
    await loadDataSource(
      formObject.getFieldsValue(),
      page.current,
      page.pageSize,
    );
  };

  const modelOnCancel = () => {
    formObject.resetFields();
    setIsModalVisible(false);
  };

  const modelOnOk = () => {
    formObject.resetFields();
    setIsModalVisible(false);
  };

  const formItemLayout = {
    labelCol: {
      span: 7,
    },
    wrapperCol: {
      span: 24,
    },
  };

  const [groupName, setGroupName] = useState([]);

  const [majorName, setMajorName] = useState([]);

  const [gradeName, setGradeName] = useState([]);

  const [className, setClassName] = useState([]);

  const selectDataSource = async () => {
    try {
      const groupData: any = await request.post(
        '/api/common_module/a_t_s/getTeam',
      );
      setGroupName(groupData.data);
      const majorData: any = await request.post(
        '/api/common_module/a_t_s/getMajor',
      );
      setMajorName(majorData.data);
      const gradeName: any = await request.post(
        '/api/common_module/a_t_s/getGrade',
      );
      setGradeName(gradeName.data);
      const className: any = await request.post(
        '/api/common_module/a_t_s/getClassInfo',
      );
      setClassName(className.data);
    } catch (e) {
      message.error('数据错误');
    }
  };

  //查看学生查询功能
  const selectStudent = async () => {
    const values = await formObject.getFieldsValue();
    const data = {
      courseId: courseId,
      teamName: values.teamName,
      majorName: values.majorName,
      gradeName: values.gradeName,
      className: values.className,
      studentName: values.studentName,
      userNo: values.userNo,
    };
    const result: any = await request.get(
      '/api/teacher/course/getCourseStudentInfo',
      {
        params: {
          ...data,
        },
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      },
    );
    console.log(result);
    if (result.data.records.length == 0) {
      message.error('暂无数据');

      setDataSource(result.data.records);
    } else {
      setDataSource(result.data.records);
    }
  };

  //重置表单
  const resetStudent = () => {
    formObject.resetFields();
    loadDataSource(null, 1, pagination.pageSize);
  };

  const columns = [
    {
      title: '小组名称',
      dataIndex: 'teamName',
      key: 'teamName',
    },
    {
      title: '院系',
      dataIndex: 'collegesName',
      key: 'collegesName',
    },
    {
      title: '专业',
      dataIndex: 'majorName',
      key: 'majorName',
    },
    {
      title: '年级',
      dataIndex: 'gradeName',
      key: 'gradeName',
    },
    {
      title: '班级',
      dataIndex: 'className',
      key: 'className',
    },
    {
      title: '班主任',
      dataIndex: 'classTeacher',
      key: 'classTeacher',
    },
    {
      title: '学员姓名',
      dataIndex: 'studentName',
      key: 'studentName',
    },
    {
      title: '学号',
      dataIndex: 'userNo',
      key: 'userNo',
    },
    {
      title: '身份证号码',
      dataIndex: 'idNo',
      key: 'idNo',
    },
    {
      title: '性别',
      dataIndex: 'sex',
      key: 'sex',
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
    },
    {
      title: '手机号',
      dataIndex: 'mobileNo',
      key: 'mobileNo',
    },
    {
      title: '项目角色',
      dataIndex: 'position',
      key: 'position',
    },
  ];

  return (
    <>
      <Modal
        title="查看学生"
        width="60%"
        visible={isModalVisible}
        onCancel={modelOnCancel}
        onOk={modelOnOk}
        maskClosable={false}
        destroyOnClose
        okText="确认"
        cancelText="取消"
      >
        <Form form={formObject} {...formItemLayout}>
          <Row gutter={24} style={{ width: '100%' }}>
            <Col span={8}>
              <Form.Item label="小组名称" name="teamName">
                <Select style={{ width: '100%' }} placeholder="请选择">
                  {(groupName || []).map((groupName: any) => {
                    return (
                      <option key={groupName.teamId} value={groupName.teamName}>
                        {groupName.teamName}
                      </option>
                    );
                  })}
                </Select>
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item label="专业" name="majorName">
                <Select style={{ width: '100%' }} placeholder="请选择">
                  {(majorName || []).map((majorName: any) => {
                    return (
                      <option
                        key={majorName.majorId}
                        value={majorName.majorName}
                      >
                        {majorName.majorName}
                      </option>
                    );
                  })}
                </Select>
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item label="年级" name="gradeName">
                <Select style={{ width: '100%' }} placeholder="请选择">
                  {(gradeName || []).map((gradeName: any) => {
                    return (
                      <option
                        key={gradeName.gradeId}
                        value={gradeName.gradeName}
                      >
                        {gradeName.gradeName}
                      </option>
                    );
                  })}
                </Select>
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={24} style={{ width: '100%' }}>
            <Col span={8}>
              <Form.Item label="班级" name="className">
                <Select style={{ width: '100%' }} placeholder="请选择">
                  {(className || []).map((className: any) => {
                    return (
                      <option
                        key={className.classId}
                        value={className.className}
                      >
                        {className.className}
                      </option>
                    );
                  })}
                </Select>
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item label="学员姓名" name="studentName">
                <Input style={{ width: '100%' }} placeholder="请输入..." />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item label="学号" name="userNo">
                <Input style={{ width: '100%' }} placeholder="请输入..." />
              </Form.Item>
            </Col>
            <Col>
              <Form.Item>
                <Button
                  type="primary"
                  style={{ marginLeft: 700 }}
                  onClick={selectStudent}
                >
                  查询
                </Button>
                <Button style={{ marginLeft: 10 }} onClick={resetStudent}>
                  重置
                </Button>
              </Form.Item>
            </Col>
          </Row>
        </Form>
        <Table
          columns={columns}
          loading={loading}
          dataSource={dataSource}
          scroll={{ x: 1500 }}
          pagination={pagination}
          onChange={pageOnChange}
        />
      </Modal>
    </>
  );
};

export { UserEdit, UserEditObject };
